<template>
  <div class="more-list">
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/goImages/vf.png" alt="" />
      </span>
      <span class="title">{{ title }}</span>
    </div>
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #list>
        <more-item v-for="(item, index) in dataList" :key="index" :address="item.business && item.business.name" :desc="item.reason_text" :img_url="item.covers && item.covers[0].url" :price="item.price_desc" :time="item.time" :title="item.title" :id="item.id" :like_count="item.likes"></more-item>
      </template>
    </refresh-list>
  </div>
</template>

<script>
import RefreshList from '../public-component/RefreshList.vue'
import MoreItem from './MoreItem.vue'
import axios from '@/utils/request/'
export default {
  props: ['id'],
  components: {
    RefreshList,
    MoreItem
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      title: '',
      page: 1,
      dataList: []
    }
  },
  methods: {
    // 发起请获取标题信息
    async requestTitle() {
      /*
      请求地址：https://api.xmonster.cn/v2/topic/313
      请求方式： get
      注意： 313是类型id
      */
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      const data = await axios.get('/v2/topic/' + this.id)
      if (data) {
        this.title = data.title
        Toast.clear()
      }
    },
    // 发请求获取列表数据
    async requestDataList() {
      /*
      请求地址：https://api.xmonster.cn/v2/topic/294/feeds
      请求方式：get
      请求参数：
      params：{
        page: 1,
        limit: 20
      }
      */
      const data = await axios.get(`/v2/topic/${this.id}/feeds`, {
        params: {
          page: this.page,
          limit: 20
        }
      })
      if (data.length > 0) {
        this.page++
        this.dataList = [...this.dataList, ...data]
        this.status.loading = false
        this.status.finished = false
      } else {
        this.status.finished = true
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.dataList = []
      this.requestTitle()
      await this.requestDataList()

      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestDataList()
      this.status.loading = false
    }
  },
  created() {
    this.requestTitle()
    this.requestDataList()
  }
}
</script>

<style lang="less" scoped>
.more-list {
  padding: 56px 10px 0;
  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 16px;
      line-height: 30px;
      font-weight: 600;
      margin-left: 20px;
    }
    .close {
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        height: 16px;
        width: 16px;
      }
    }
  }
}
</style>
